import { useMemo } from "react";

import { SvgProps } from "./";

/** 问题评论区的点赞按钮 */
export default function Like({
  className,
  onClick,
  liked,
}: SvgProps & { liked: boolean }) {
  return useMemo(
    () => (
      <svg
        className={className}
        viewBox="0 0 1024 1024"
        version="1.1"
        xmlns="http://www.w3.org/2000/svg"
        p-id="9776"
        width="200"
        height="200"
      >
        {liked && (
          <path
            d="M500.192 901.77066667a97.74933333 97.74933333 0 0 0 60.224-20.864c93.25866667-73.152 194.976-193.568 267.488-288.384 51.79733333-70.304 64.34133333-179.2-6.22933333-249.728C728.53333333 249.6 589.71733333 292.608 499.88266667 399.68 444.02133333 340.26666667 333.23733333 277.33333333 216.21333333 367.584c-77.696 60.992-78.00533333 190.048-26.208 260.68266667a1410.304 1410.304 0 0 0 249.6 252.97066666 97.71733333 97.71733333 0 0 0 60.58666667 20.53333334z"
            fill="#92CFC8"
            className="primary-l-fill"
            p-id="25832"
            opacity={0.4}
          ></path>
        )}
        <path
          d="M221.48266667 234.60266667a33.06666667 33.06666667 0 0 1-10.48533334-64.43733334 277.19466667 277.19466667 0 0 1 71.92533334-13.952 33.06666667 33.06666667 0 1 1 3.79733333 66.02666667 211.06133333 211.06133333 0 0 0-54.752 10.66666667 33.06666667 33.06666667 0 0 1-10.48533333 1.696z"
          fill="#484848"
          className="on-bg-fill"
          p-id="25833"
        ></path>
        <path
          d="M507.488 934.848a165.184 165.184 0 0 1-97.152-31.69066667l-0.18133333-0.13866666a1817.51466667 1817.51466667 0 0 1-329.70666667-317.056l-0.416-0.53333334c-33.57866667-43.43466667-53.088-103.296-53.536-164.26666666-0.48-64.74666667 20.064-124.90666667 57.83466667-169.38666667a33.06666667 33.06666667 0 1 1 50.41066666 42.80533333c-27.52 32.40533333-42.47466667 77.184-42.112 126.09066667 0.34133333 46.63466667 14.752 91.81866667 39.53066667 124.02133333a1751.28533333 1751.28533333 0 0 0 317.39733333 305.17333334 98.88 98.88 0 0 0 58.61333334 18.80533333h0.23466666a98.60266667 98.60266667 0 0 0 58.38933334-19.2A1750.90133333 1750.90133333 0 0 0 884.26666667 544.30933333c30.784-39.79733333 45.13066667-99.36 37.42933333-155.52-6.79466667-49.62133333-30.09066667-91.456-65.58933333-117.792-59.73333333-44.352-122.54933333-59.424-186.57066667-44.8-48.55466667 11.104-98.784 40.53333333-137.80266667 80.75733334l-23.46666666 24.20266666L484.50133333 307.2c-19.08266667-19.25333333-41.6-39.46666667-76.448-56.72533333A33.06666667 33.06666667 0 0 1 437.33333333 191.232a323.50933333 323.50933333 0 0 1 70.64533334 47.264c32.37333333-28.02133333 82.48533333-62.048 146.752-76.74666667A272.224 272.224 0 0 1 771.2 160.23466667c42.83733333 8.832 84.66133333 28.224 124.33066667 57.65333333 49.89866667 37.024 82.47466667 94.53866667 91.73333333 161.93066667 10.18666667 74.368-8.84266667 151.11466667-50.89066667 205.28l-0.37333333 0.46933333a1817.10933333 1817.10933333 0 0 1-329.70666667 317.056 165.22666667 165.22666667 0 0 1-97.71733333 32.224z"
          fill="#484848"
          className="on-bg-fill"
          p-id="25834"
        ></path>
      </svg>
    ),
    [onClick, liked]
  );
}
